<template>

	<div class="organ-page page">
			<div class="content">
				<div class="organ-crumb">
					旗下教练（{{dataForm.total}}）
					<!-- <div class="dowmzj">
						<el-select v-model="value" placeholder="默认排序">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div> -->
					快速查询
					<div class="dowmzj">
						<el-input v-model="dataForm.name" placeholder="请输入手机号或姓名"></el-input>
					</div>
					
					<div class="organ-crumb-right">
						<button  @click="search" class="organ-red">查询</button>
						<!-- <button  class="organ-red">审核</button> -->
						<button  class="organ-red" @click="onDeleteCoach">移除教练</button>
						<el-badge :is-dot='isDot' class="item">
								<button  class="organ-red" @click="shenheduilie">审核列表</button>
						</el-badge>	
						
						<button  class="organ-red" @click="toGet">账号资料</button>
						<button  class="organ-red" @click="jianjie">我的简介</button>
						<button  class="organ-red" @click="zhuangbei">装备申请列表</button>
					</div>
				</div>
				<div class="organ-group-con paddingtop20">
					<el-table
						:header-cell-style="{background:'#F7F7F7',color:'#333333'}"
					    ref="multipleTable"
					    :data="tableData"
					    stripe
					    tooltip-effect="dark"
					    style="width: 100%"
					    @selection-change="handleSelectionChange">
					    <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <!-- <el-table-column
					      label="序号"
					      width="120">
					      <template slot-scope="scope">{{ scope.row.date.index }}</template>
					    </el-table-column> -->
					    <el-table-column
					      prop="name"
					      label="教练"
					      width="200">
					      <!--插入图片链接的代码-->
							    <template slot-scope="scope">
							    	<!-- <img  :src="scope.row.imgs" alt="" style="width: 36px;height: 36px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;"> -->
							      {{ scope.row.name }}
							      
							    </template>
					    </el-table-column>
					    <el-table-column
					      prop="coachLevel"
					      label="等级"
					      show-overflow-tooltip>
					    </el-table-column>
					    <el-table-column
					      prop="position"
					      label="职位"
					      show-overflow-tooltip>
							<!--插入图片链接的代码-->
							    <template slot-scope="scope">
							    	{{ scope.row.position }}
								    <a href="">
								    	<img  :src="scope.row.editorimgpath" alt="" style="width: 18px;height: 17px;margin:1px;vertical-align: middle;">
								    </a>
							    </template>
					    </el-table-column>
					    <el-table-column
					      prop="courseCount"
					      label="课程"
					      show-overflow-tooltip>
					    </el-table-column>
					    <el-table-column
					      prop="teamCount"
					      label="队伍"
					      show-overflow-tooltip>
					    </el-table-column>
					    <el-table-column
					      prop="rank"
					      label="星级"
					      show-overflow-tooltip>
					    </el-table-column>
					    <el-table-column
					      prop="opera"
					      label="操作"
					      show-overflow-tooltip>
					      <template slot-scope="scope">
					        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
					      </template>
					    </el-table-column>
					  </el-table>
					  <div class="organ_pagination">
						  	<el-pagination
									background
						      @current-page="currentPage4"
						      layout="total, prev, pager, next"
						      :total="dataForm.total">
						    </el-pagination>
					  </div>
					
					
					
					
					
					
				</div>
				
			</div>
		</div>

</template>

<script>
	import { mapActions, mapState } from 'vuex'
	export default {

		computed: {
			...mapState('Login', [
				'userStatus'
			])
		},
		data() {
	      return {
					isDot:false,
					isQY:false,
					isJL:false,
					dataForm: {
						mechanismId: 0,
						name: '',
						pageNum: 1,
						pageSize: 10,
						type: 0,
						total:0,
					},

					selectList: [],

	      	options: [],
	        tableData: [],
	        value: '',
	        multipleSelection: []
	      }
			},
	mounted(){
		console.log(this.userStatus.statusId);
		this.getPlay ();
		this.getCoach();
	},
		methods: {
			...mapActions('organ', [
				'fetchCoachList',
				'deleteCoach',
				'typeListJL',
				'typeListQY',
			]),

			currentPage4 (val) {
				this.dataForm.pageNum = val
				this.getList()
			},

			toGet () {
				this.$router.push('/organ/set')
			},

			handleSelectionChange (val) {
				this.selectList = val
			},

			getList () {
				this.dataForm.mechanismId = Number(this.userStatus.statusId)
				this.fetchCoachList(this.dataForm).then(res => {
					const { code, data, data: {list, total}} = res
					if (code === 200 && data) {
						this.tableData = list
						this.dataForm.total = Number(total)
					}
				})
			},
			//教练审核列表
				getCoach () {
					let data = {
						"pageNum": 0,
						"pageSize": 0
					}
				this.typeListJL(data).then(res => {
					const { code, data, data:{list, total}} = res
					if (code === 200 && data) {
								console.log(list!='');
								this.isJL = list !="";
					}
				})
			},
			//球员审核列表
			getPlay () {
					let data = {
						"pageNum": 0,
						"pageSize": 0
					}
				this.typeListQY(data).then(res => {
					const { code, data, data:{list, total}} = res
					if (code === 200 && data) {
						// this.tableList = list
							console.log(list!='');
							this.isQY = list !="";


					}
				})
			},

			shenheduilie () {
				this.$router.push('/organ/organList')
			},

			onDeleteCoach () {
				if (this.selectList.length === 0) return false
				const {name, id} = this.selectList[0]

				this.$confirm(`是否移除${name}？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.fetchDeleteCoach(Number(id))
				})
			},

			fetchDeleteCoach (id) {
				this.deleteCoach({id}).then(res => {
					const { code } = res
					if (code === 200) {
						this.$message({
							message: '移除成功',
							type: 'success'
						})
						this.dataForm.pageNum = 1
						this.getList()
					}
				})
			},

			zhuangbei () {
				this.$router.push('/organ/equipApply')
			},

			jianjie () {
				this.$router.push('/organ/myIntrodu')
			},
			search(){
				this.getList()

			},
		handleClick(row) {
					console.log(row);
					this.$router.push(`/organ/coachDetail?id=${row.id}`)
	      },
	      handleSizeChange(val) {
	        console.log(`每页 ${val} 条`);
	      },
	      handleCurrentChange(val) {
	        console.log(`当前页: ${val}`);
	      }
			},
			
		
			
			created () {
				this.getList()
			},
			watch:{
				isQY(){
					this.isDot = this.isQY || this.isJL;
				},
				isJL(){
					this.isDot = this.isQY || this.isJL;
				}
			}
		

	    
	  }
</script>

<style scoped>
	@import url("porgan.css");
</style>
